<template>
  <div>
    <!-- :value 动态设置 value 属性 -->
    <!-- 数据变化会影响视图, 单向的 -->
    <!-- 用户名: <input :value="msg" type="text"> -->
    <!-- v-model 双向数据绑定 -->
    <!-- v-model 绑定的其实是 input 的 value 属性 -->
    用户名: <input v-model="msg" type="text">
    <!-- 为什么 vue 要设计双向绑定呢? -->
    <!-- 假设没有双向绑定, 用户输入完用户名密码后, 点击登录 -->
    <!-- 获取用户输入的用户名和密码, 此时需要获取 DOM 元素 -->
    <!-- DOM 对象.value 才能获取到用户名和密码 -->
    <!-- 
      现在有了双向绑定后, 只需要将表单元素和变量进行绑定
      用户点击登录时, 直接取变量的值就可以获取到用户名密码了
     -->
  </div>
</template>

<script>
export default {

  data() {
    return {
      msg: 'Hello'
    }
  }
}
</script>

<style>

</style>